<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>软工综合信息系统-登录</title>
		<script src="./js/jquery-2.2.4.min.js"></script>
		<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
		<link rel="stylesheet" href="./css/login.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1580171_n09hcqrrybq.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1621398_j4b6ybxgvk.css">
		<script src="./js/public.js"></script>
		<script src="./js/JQSession.js"></script>
	</head>

	<body>
		<!-- 验证码未输入提示-->
		<div class="modal-dialog modal fade" id="is_null_a">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>错误</h4>
				</div>
				<div class="modal-body">
					<p>请输入验证码！</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" class="close" data-dismiss="modal" id="is_null_a_button">确认</button>
				</div>
			</div>
		</div>
		<!-- 验证码错误提示-->
		<div class="modal-dialog modal fade" id="is_null_b">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>错误</h4>
				</div>
				<div class="modal-body">
					<p>验证码错误，请重新输入！</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" class="close" data-dismiss="modal" id="is_null_b_button">确认</button>
				</div>
			</div>
		</div>
		<!-- 账号或密码未输入提示-->
		<div class="modal-dialog modal fade" id="is_null">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>错误</h4>
				</div>
				<div class="modal-body">
					<p>请输入账号和密码！</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" class="close" data-dismiss="modal" id="is_null_button">确认</button>
				</div>
			</div>
		</div>
		<!--限制密码长度-->
		<div class="modal-dialog modal fade" id="pwd1">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>错误</h4>
				</div>
				<div class="modal-body">
					<p>密码不能小于6位数！</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" class="close" data-dismiss="modal" id="pwd1_button">确认</button>
				</div>
			</div>
		</div>
		<!--账号错误或账号不存在跳出提示-->
		<div class="modal-dialog modal fade" id="shibai">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>失败</h4>
				</div>
				<div class="modal-body">
					<p>账号错误或账号不存在！</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" class="close" data-dismiss="modal" id="shibai_button">确认</button>
				</div>
			</div>
		</div>
		<!-- 密码错误跳出提示-->
		<div class="modal-dialog modal fade" id="pwderror">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>错误</h4>
				</div>
				<div class="modal-body">
					<p>密码错误，请重新输入！</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" class="close" data-dismiss="modal" id="pwderror_button">确认</button>
				</div>
			</div>
		</div>

		<div class="big">
			<div class="left">
				<img src="./img/login.jpg" alt="">
			</div>
			<div class="right">
				<p class="login_head">登&emsp;录</p>
				<div class="input-group input-group-lg margintop">
					<span class="input-group-addon" id="sizing-addon1"><span class="iconfont icon-xuexiao_banji"></span></span>
					<input type="text" id="user" class="form-control" placeholder="请输入您的账号" aria-describedby="sizing-addon1" autocomplete="on">
				</div>
				<div class="input-group input-group-lg margintop" id="passwd">
					<span class="input-group-addon" id="sizing-addon1"><span class="iconfont icon-mima"></span></span>
					<input type="password" id="pwd" class="form-control" placeholder="请输入您的密码" aria-describedby="sizing-addon1" autocomplete="on">
				</div>
				<div class="input-group input-group-lg margintop" id="code">
					<span class="input-group-addon" id="sizing-addon1"><span class="iconfont icon-yanzhengma"></span></span>
					<input type="text" id="ma" class="form-control" placeholder="请输入您的验证码" aria-describedby="sizing-addon1" autocomplete="off">
					<span class="input-group-addon" id="span1">
						<div class="yz" >
							<div class="yz_code huan"></div>
						</div>  
					</span>
				</div>
				<div class="radio text-center">
					<label class="login_label"><input type="radio" name="xuanze" id="student" value="0" checked>学生</label>
					<label class="login_label"><input type="radio" name="xuanze" id="teacher" value="1" >教师</label>
					<label class="login_label"><input type="radio" name="xuanze" id="admin" value="-1" >管理员</label>
					<label class="login_label"><input type="radio" name="xuanze" id="admin" value="-2" >公司联系人</label>
					<a class="btn btn-link" href="./findpassword.html">找回密码</a>
				</div>
				<p class="text-center"><button id="button" type="button" class="btn btn-primary">登&emsp;录</button></p>
			</div>
		</div>
	</body>

	<script>
		//验证码全局变量
		var res = "";

		// 获取焦点事件
		$("#user").focus(function() {
			$("#user").css("border-color", "lightskyblue");
		});
		$("#ma").focus(function() {
			$("#ma").css("border-color", "lightskyblue");
		});
		$("#pwd").focus(function() {
			$("#pwd").css("border-color", "lightskyblue");
		});
		// 失去焦点事件
		$('#user').click(function() {
			$('#user').blur(function() {
				$(this).css('border-color', '')
				if($(this).val() == '') {
					$(this).css('border-color', 'red')
					$(this).attr('placeholder', '未填写账号')
				}
			})
		})
		$('#ma').click(function() {
			$('#ma').blur(function() {
				$(this).css('border-color', '')
				if($(this).val() == '') {
					$(this).css('border-color', 'red')
					$(this).attr('placeholder', '未填写验证码')
				}
			})
		})
		$('#pwd').click(function() {
			$('#pwd').blur(function() {
				$(this).css('border-color', '')
				if($(this).val() == '') {
					$(this).css('border-color', 'red')
					$(this).attr('placeholder', '未填写密码')
				} else if($(this).val().length < 6) {
					$('#pwd1').modal({
						keyboard: true,
						show: true
					})
				}
			})
		})
		// 生成两个数之间的随机数
		function rnd(start, end) {
			return Math.floor(Math.random() * (end - start + 1)) + start;
		}

		//验证码字符
		var str = "0123456789abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";

		// 生成4位数字验证码
		function code() {
			$('#ma').val('');
			var arr = [];
			for(var i = 0; i < 4; i++) {
				arr[i] = str.charAt(rnd(0, str.length - 1));
			}
			// 将数组转化为字符串
			res = arr.join("")
			$('.yz_code').html(res);
		}
		// 首次进入时展示的验证码
		code();

		$('.huan').click(function(event) {
			code();
		});

		function denglu() {
			if($('#user').val() == '' || $('#pwd').val() == '') {
				code();
				$('#is_null').modal({
					keyboard: true,
					show: true
				})
				return;
			} else if($('#ma').val() == '') {
				code();
				$('#is_null_a').modal({
					keyboard: true,
					show: true
				})
				return;
			} else if($('#ma').val().toLowerCase() != res.toLowerCase()) {
				code();
				$('#is_null_b').modal({
					keyboard: true,
					show: true
				})
				return;
			}

			$.ajax({
				xhrFields: {
					withCredentials: true
				},
				type: "POST",
				url: getFullURL("login"),
				data: {
					username: $('#user').val(),
					password: $('#pwd').val(),
					status: $("input[type='radio']:checked").val(),
				},
				success: function(data) {
					var flag = $("input[type='radio']:checked").val();
					console.log(data);
					if(data.status == 0) {
						if(flag === "0") {
							console.log(0);
							$.session.set("shenfen", "user");
							$.session.set("sno", data.sno);
							window.location.href = "./home.html";
						} else if(flag === "1") {
							console.log(1);
							$.session.set("shenfen", "teacher");
							$.session.set("tno", data.tno);
							window.location.href = "./home.html";
						} else if(flag === "-1") {
							console.log(-1);
							$.session.set("shenfen", "admin");
							window.location.href = "./home.html";
						} else if(flag === "-2") {
							console.log(-2);
							$.session.set("shenfen", "cAdmin");
							window.location.href = "./home.html";
						}
					} else if(data.status == 1) {
						$('#shibai').modal({
							keyboard: true,
							show: true
						})
						code();
					} else if(data.status == -1) {
						$('#pwderror').modal({
							keyboard: true,
							show: true
						})
						code();
					}
				},
				error: function(err) {
					alert("请求异常，请重新登录！", function() {
						$(location).attr('href', './login.html');
					})
				}
			})
		}

		//监听回车
		document.onkeydown = function() {
			if(event.keyCode == 13) {
				if($('#pwd1').css('display') != 'none') {
					$('#pwd1_button').trigger("click");
				} else if($('#shibai').css('display') != 'none') {
					$('#shibai_button').trigger("click");
				} else if($('#pwderror').css('display') != 'none') {
					$('#pwderror_button').trigger("click");
				} else if($('#is_null_a').css('display') != 'none') {
					$('#is_null_a_button').trigger("click");
				} else if($('#is_null_b').css('display') != 'none') {
					$('#is_null_b_button').trigger("click");
				} else if($('#is_null').css('display') != 'none') {
					$('#is_null_button').trigger("click");
				} else {
					denglu();
				}
			}
		}

		//登录请求
		$('#button').click(function() {
			denglu()
		})
	</script>

</html>